<template>
  <div>
    <div class="now">
      <h3>当前积分:</h3>
      <h3>3000</h3>
      <el-link target="_blank" class="rules">如何获取积分</el-link>
    </div>
    <div class="record">
      <p>积分纪录</p>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          prop="date"
          label="操作类型"
          width="300"
        >
        </el-table-column>
        <el-table-column align="center" prop="name" label="积分" width="400">
        </el-table-column>
        <el-table-column align="center" prop="address" label="发生事件">
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <h4>共有 126 条，当前显示 10 个</h4>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="100"
                layout="prev, pager, next, jumper"
                :total="1000"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData: [
        {
          date: "录入未放款客户",
          name: "+2",
          address: "2016-01-01 20:08",
        },
        {
          date: "征信查询",
          name: "-20",
          address: "2016-01-01 20:08",
        },
        {
          date: "录入未放款客户",
          name: "+2",
          address: "2016-01-01 20:08",
        },
        {
          date: "充值8000元",
          name: "+10000",
          address: "2016-01-01 20:08",
        },
        {
          date: "录入过往客户",
          name: "+60",
          address: "2016-01-01 20:08",
        },
        {
          date: "充值8000元",
          name: "+10000",
          address: "2016-01-01 20:08",
        },
        {
          date: "录入未放款客户",
          name: "+2",
          address: "2016-01-01 20:08",
        },
        {
          date: "征信查询",
          name: "-20",
          address: "2016-01-01 20:08",
        },
        {
          date: "录入未放款客户",
          name: "+2",
          address: "2016-01-01 20:08",
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.now {
  position: relative;
  height: 50px;
}
h3:nth-child(1) {
  font-weight: normal;
  position: absolute;
  left: 0;
  top: 0;
}
h3:nth-child(2) {
  font-weight: normal;
  position: absolute;
  left: 90px;
  top: 0;
}
.rules {
  position: absolute;
  top: 23px;
  left: 150px;
}
.el-row {
  margin-top: 10px;
}

.bg-purple-dark {
  background: #fff;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
h4 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  line-height: 40px;
  margin-left: 10px;
  width: 210px;
  height: 36px;
}
.block {
  float: right;
  position: absolute;
  right: 0;
  top: 2px;
}
</style>